<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="myApp">

    <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="用户名">
            <el-input v-model="query.userName" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item label="角色">
            <el-select v-model="query.role" placeholder="角色">
                <el-option label="" value=""></el-option>
                <el-option label="普通职员" value="0"></el-option>
                <el-option label="管理员"  value="1"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="queryData">查询</el-button>

            <el-button type="primary" @click="addPage" v-if="role == 1">新增</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%">
        <el-table-column label="编号" prop="userId"></el-table-column>
        <el-table-column label="用户名" prop="userName"></el-table-column>
        <el-table-column label="密码" prop="userPwd"></el-table-column>
        <el-table-column label="角色" >
            <template slot-scope="x">
                <el-tag  v-if="x.row.role==0">普通职员</el-tag>
                <el-tag type="success" v-if="x.row.role==1">管理员</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="x">
                <el-button type="primary" icon="el-icon-edit" circle @click="updatePage(x.row)" v-if="role == 1"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(x.row)" v-if="role == 1"></el-button>
            </template>

        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[3, 5, 7, 10]"
            :page-size="query.row"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--用户新增的对话框-->
    <el-dialog
            title="用户新增"
            :visible.sync="addShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">

            <el-form-item label="用户名">
                <el-input  v-model="parameter.userName" ></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="parameter.userPwd" ></el-input>
            </el-form-item>

            <el-form-item label="角色">
                <el-select   v-model="parameter.role" placeholder="请选择角色">
                    <el-option label="普通职员" value="0"></el-option>
                    <el-option label="管理员" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <!--用户修改的对话框-->
    <el-dialog
            title="用户修改"
            :visible.sync="updateShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">

            <el-form-item label="编号">
                <el-input  v-model="parameterUpdate.userId" disabled></el-input>
            </el-form-item>

            <el-form-item label="用户名">
                <el-input v-model="parameterUpdate.userName"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="parameterUpdate.userPwd"></el-input>
            </el-form-item>

            <el-form-item label="角色">
                <el-select v-model="parameterUpdate.role" placeholder="请选择角色">
                    <el-option label="普通职业" value="0"></el-option>
                    <el-option label="管理" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update">修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#myApp",//作用页面的范围
        data:{ //数据模型
            parameter:{//新增请求参数对象
                userName:"",
                userPwd:"",
                role:""
            },
            parameterUpdate:{//修改请求参数对象
                userId:"",
                userName:"",
                userPwd:"",
                role:""
            },
            query:{ // 查询
              userName:"",
              role:"",
              page:1,
              row:3,
            },
            total:0, // 总记录数
            list:[], //定义数组
            addShow:false,//是否显示新增对话框
            updateShow:false,//是否显示修改对话框
            role:"", // 存角色信息
            src:"",
        },
        methods:{//函数，方法
            handleSizeChange(row){ // 下拉框出触发的事件
                this.query.page = 1;
                this.query.row = row;
                this.queryData();
            },
            handleCurrentChange(page){ // 页码发生改变触发的事件
                this.query.page = page;
                this.queryData();
            },
            del(obj) {
                //把vue对象传递一个变量self
                const self = this;
                // 定义一个确认框
                this.$confirm("你确定要删除吗？","提示").then(function () {
                    $.ajax({
                        url:"/user/del",
                        data:{
                            "id":obj.userId
                        },//参数
                        success:function (rs) {
                            if(rs.code==200){
                                //刷新数据
                                self.queryData();
                            } else{
                                //提示
                                self.$alert(rs.msg);
                            }
                        }
                    })
                })
            },
            add(){//新增操作
                //把vue对象传递一个变量self
                const self = this;
                $.ajax({
                    url:"/user/add",
                    data:this.parameter,//参数
                    success:function (rs) {
                        if(rs.code==200){
                            //关闭新增对话框
                            self.addShow = false;
                            //刷新数据
                            self.queryData();
                        } else{
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            addPage(){//新增对话框
                //打开新增对话框
                this.addShow = true;
            },
            update() {//修改操作
                //把vue对象传递一个变量self
                const self = this;
                $.ajax({
                    url:"/user/update",
                    type:"post",
                    data:JSON.stringify(this.parameterUpdate),//参数
                    contentType:"application/json",//告诉服务器，发送的数据是json格式
                    success:function (rs) {
                        if(rs.code==200){
                            //关闭修改对话框
                            self.updateShow = false;
                            //刷新数据
                            self.queryData();
                        } else{
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            updatePage(obj){//修改对话框
                // 把选中行的数据赋值给parameterUpdate对象
                this.parameterUpdate = obj;
                this.updateShow = true;
            },
            queryData(){//用户查询
                //把vue对象传递一个变量self
                const self = this;
                //发送ajax请求，来获取服务端返回的数据
                $.ajax({
                    url:"/user/query",//服务器接口地址
                    data:this.query,//参数
                    success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
                        //打印信息
                        console.log(rs);
                        if(rs.code==200){
                            self.list = rs.data.list;
                            self.total = rs.data.total;
                        }else{
                            self.$message(rs.msg);
                            //清空
                            self.list =[]
                        }
                    }
                })
            }
        },
        mounted(){//生命周期函数，页面加载完毕就会执行函数
            //访问查询函数
            this.queryData();
            this.role = sessionStorage.getItem("role");
            this.src = sessionStorage.getItem("circleUrl");
        }
    })

</script>
</html>
